<template>
  <div>
    <!-- 头部 -->
    <Header></Header>

    <!-- 内容区域 -->
    <div class="editinfo">
      <div class="son">
        <!-- 头像上传 -->
        <div class="loader">
          <van-uploader :after-read="afterRead" preview-size="46px" />
        </div>
        <span>头像</span>
        <span class="right">
          <img
            v-if="userInfo.user_img !== null"
            :src="userInfo.user_img"
            alt=""
          />
          <img v-else src="../assets/aa.jpg" alt="" />
        </span>
      </div>

      <div class="son" @click="show2 = true">
        <span>昵称</span>
        <span class="right">{{ userInfo.name }}</span>
      </div>

      <div class="son">
        <span>账号</span>
        <span class="right">{{ userInfo.username }}</span>
      </div>

      <div class="son" @click="show1 = true">
        <span>性别</span>
        <span class="right">{{userInfo.gender==1?'男':'女'}}</span>
      </div>

      <div class="son" @click="show = true">
        <span>个签</span>
        <span class="right">{{ userInfo.user_desc }}</span>
      </div>
    </div>
     <!-- 按钮 -->
      <div class="out" @click="toLogin">
        <span>退出登录</span>
      </div>
      <div class="back" @click="toUser">
        <span >返回空间</span>
      </div>
    <!-- 修改信息弹出框 -->
    <!-- 昵称 -->
    <van-dialog
      v-model="show2"
      title="请修改昵称"
      show-cancel-button
      confirm-button-color="#fb7299"
      @confirm="editInfo"
      autofocus
    >
      <van-cell-group>
        <van-field v-model="userInfo.name" />
      </van-cell-group>
    </van-dialog>
    <!-- 个签 -->
    <van-dialog
      v-model="show"
      title="请修改个签"
      show-cancel-button
      confirm-button-color="#fb7299"
      @confirm="editInfo"
      autofocus
    >
      <van-cell-group>
        <van-field
          v-model="userInfo.user_desc"
        />
      </van-cell-group>
    </van-dialog>
    <!-- 性别 -->
    <van-action-sheet v-model="show1" :actions="actions" @select="onSelect" />
  </div>
</template>

<script>
import Header from "@/view/Header.vue"
export default {
  components: {
    Header
  },
  data() {
    return {
      userInfo: {},
      show: false,
      show1: false,
      show2:false,
      gender:'',
      actions: [{ name: '男',val:1 }, { name: '女',val:0 }]
    }
  },
  created() {
    // 进入页面获取数据
    this.getUserData()
  },
  methods: {
    async getUserData() {
      const res = await this.$http.get(`/user/${localStorage.getItem("id")}`)
      this.userInfo = res.data[0]
    },
    async afterRead(img) {
      // 此时可以自行将文件上传至服务器
      const formdata = new FormData()
      // 获取到上传的文件的属性
      formdata.append("file", img.file)
      const res = await this.$http.post(`/upload`, formdata)
      // console.log(res);
      this.userInfo.user_img = res.data.url
      this.updateInfo();
    },
    // 修改信息上传到后台
    async updateInfo() {
      const res = await this.$http.post(
        `/update/${this.userInfo.id}`,
        this.userInfo
      )
      if (res.status == 200) {
        this.$message.success("修改成功")
      }
    },
    // 保存修改的信息
    editInfo() {
      this.updateInfo()
      this.getUserData()
    },
    onSelect(item) {
      this.userInfo.gender = item.val
      this.updateInfo()
      this.show1 = false
    },
   toLogin () {
     this.$router.push('/login')
   },
   toUser () {
     this.$router.push('/user')
   }
  }
};
</script>

<style lang="less" scoped>
.editinfo {
  background-color: #fff;
  margin-top: 5.556vw;
  position: relative;
  overflow: hidden;
  .son {
    padding: 4.167vw;
    border-bottom: 1px solid #e7e7e7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .right {
      color: #a3a1a1;
      img {
        width: 12.778vw;
        height: 12.778vw;
        border-radius: 50%;
      }
    }
  }
}
.editinfo:nth-child(1) {
  position: relative;
}
.loader {
  position: absolute;
  margin-left: 83.333vw;
  margin-bottom: -1.389vw;
  position: absolute;
  opacity: 0;
}
.out {
  background-color: #fff;
  margin: 4.167vw 0 1.389vw 0 ;
  color: #a3a1a1;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 8.333vw;
}
.back{
  background-color: #fff;
  color: #a3a1a1;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 8.333vw;

}
</style>
